<p>This is an issue when passing a function reference directly to array iterator methods like <code>map</code>, <code>forEach</code>,
<code>filter</code>, <code>find</code>, <code>some</code>, <code>every</code>, <code>reduce</code>, <code>reduceRight</code>, or
<code>flatMap</code>.</p>
<h2>Why is this an issue?</h2>
<p>Array iterator methods in JavaScript pass multiple arguments to their callback functions: the current element, the index, and the entire array.
When you pass a function reference directly to these methods, the function receives all these arguments, not just the element.</p>
<p>This can cause unexpected behavior in two scenarios:</p>
<ol>
  <li> <strong>Function signature changes</strong>: If the referenced function is later modified to accept additional parameters, it may start using
  the index or array arguments unintentionally, leading to different behavior. </li>
  <li> <strong>Unintended parameter usage</strong>: The function might already accept multiple parameters for other purposes, causing it to
  misinterpret the index or array as meaningful input. </li>
</ol>
<p>For example, if you have <code>[1, 2, 3].map(parseInt)</code>, the <code>parseInt</code> function receives both the element and the index. Since
<code>parseInt(string, radix)</code> uses the second parameter as the radix, this produces unexpected results: <code>[1, NaN, NaN]</code> instead of
<code>[1, 2, 3]</code>.</p>
<p>This issue is particularly problematic when working with external libraries or modules that might change their function signatures in future
versions, potentially breaking your code without any obvious indication.</p>
<h3>What is the potential impact?</h3>
<p>This can lead to subtle bugs that are difficult to debug, especially when:</p>
<ul>
  <li> External dependencies update their function signatures </li>
  <li> Functions are refactored to accept additional parameters </li>
  <li> The unexpected behavior only manifests with certain data patterns </li>
</ul>
<p>These bugs can cause incorrect data processing, application crashes, or security vulnerabilities if the unexpected parameters affect business logic
or data validation.</p>
<h3>How to fix?</h3>
<p>Wrap the function reference in an arrow function or anonymous function to explicitly control which parameters are passed. This ensures only the
intended arguments reach your function.</p>
<h4>Non-compliant code example</h4>
<pre data-diff-id="1" data-diff-type="noncompliant">
const numbers = [1, 2, 3];
const result = numbers.map(parseInt); // Noncompliant
</pre>
<h4>Compliant code example</h4>
<pre data-diff-id="1" data-diff-type="compliant">
const numbers = [1, 2, 3];
const result = numbers.map(element =&gt; parseInt(element));
</pre>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://github.com/sindresorhus/eslint-plugin-unicorn#readme">eslint-plugin-unicorn</a> - Rule <a
  href="https://github.com/sindresorhus/eslint-plugin-unicorn/blob/HEAD/docs/rules/no-array-callback-reference.md">no-array-callback-reference</a>
  </li>
  <li> MDN - Array.prototype.map() - <a
  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">Documentation for the map method and its callback
  parameters</a> </li>
  <li> MDN - Array iteration methods - <a
  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#iteration_methods">Overview of all array iteration
  methods and their callback signatures</a> </li>
</ul>
